<template>
  <moon-tabs :selected="x" @update="x=$event">
    <moon-tab title="导航1">
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
    </moon-tab>
    <moon-tab title="禁用导航2" :disabled="true">
      <div>内容2</div>
      <div>内容2</div>
      <div>内容2</div>
      <div>内容2</div>
      <div>内容2</div>
    </moon-tab>
    <moon-tab title="导航3">
      <div>内容3</div>
      <div>内容3</div>
      <div>内容3</div>
      <div>内容3</div>
      <div>内容3</div>
    </moon-tab>
  </moon-tabs>
</template>

<script>
import MoonTabs from '../lib/MoonTabs.vue'
import MoonTab from '../lib/MoonTab.vue'
export default {
  components: {
    MoonTabs,
    MoonTab
  },
  data() {
    return {
      x: '导航1',
      sourceCodeTitle: '禁用导航',
      sourceCode:
        `<template>
  <moon-tabs :selected="x" @update="x=$event">
    <moon-tab title="导航1">
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
    </moon-tab>
    <moon-tab title="禁用导航2">
      <div>内容2</div>
      <div>内容2</div>
      <div>内容2</div>
      <div>内容2</div>
      <div>内容2</div>
    </moon-tab>
    <moon-tab title="导航3">
      <div>内容3</div>
      <div>内容3</div>
      <div>内容3</div>
      <div>内容3</div>
      <div>内容3</div>
    </moon-tab>
  </moon-tabs>
</template>
        
<script>
import MoonTabs from '../lib/MoonTabs.vue'
import MoonTab from '../lib/MoonTab.vue'
export default {
  components: {
    MoonTabs,
    MoonTab
  },
  data() {
    return {
      x: '导航2'
    }
  }
}
</` + 'script>'
    }
  }
}
</script>
